<template>
	<view class="page">
		<nav-bar title="收货地址" bgColor="#f5f5f5"></nav-bar>
        <!-- 公共组件-每个页面必须引入 -->
        <public-module></public-module>
        <mescroll-body ref="mescrollRef" bottom="88" @init="mescrollInit" :down="downOption" :up="upOption" @down="downCallback" @up="upCallback" @emptyclick="onPageJump('/pages/my/address/addAddress')">
            <view class="address_list" v-for="(item, index) of addressList" :key="index">
                <view class="address_info" @click="onSelectAddress(item)">
                    <text>{{ item.region }}</text>
                    <view>{{ item.address }}</view>
                </view>
                <view class="user_info" @click="onSelectAddress(item)">
                    <text>{{ item.receiveName }}</text>
                    <text>{{ item.phone }}</text>
                </view>
                <view class="btn_box">
                    <view class="default" :class="{ active: item.isDefault }" @click="onSetDefault(index)">默认地址</view>
                    <view class="edit_delete_box">
                        <view @click="onPageJump('/pages/my/address/addAddress?objId=' + item.objId)">
                            <image src="../../../static/icon/theme/ic_editing_name.png" mode="aspectFit"></image>
                            编辑
                        </view>
                        <view @click="onDelete(index)">
                            <image src="../../../static/icon/ic_delete.png" mode="aspectFit"></image>
                            删除
                        </view>
                    </view>
                </view>
            </view>
		</mescroll-body>
		<view class="add_address"><button @click="onPageJump('/pages/my/address/addAddress')">添加地址</button></view>
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
import MescrollMixin from '@/components/common/mescroll-uni/mescroll-mixins.js';
export default {
	mixins: [MescrollMixin], // 使用mixin (在main.js注册全局组件)
	data() {
		return {
			addressList: [],
            downOption: {
            	auto: false, //是否在初始化后,自动执行downCallback; 默认true,
            },
            upOption: {
            	empty: {
            		icon: "http://qn.kemean.cn//upload/202005/20/15899428609022uellib5.png",
            		tip: "你还没有添加地址~",
            		btnText: "添加收货地址"
            	}
            },
			//是否是选择收货地址
			isSelect: 0
		};
	},
	//第一次加载
	onLoad(e) {
		if (e.isSelect) {
			this.isSelect = e.isSelect;
		}
	},
	//页面显示
	onShow() {
		this.$nextTick(() => {
		    this.mescroll.triggerDownScroll();
		});
	},
	//方法
	methods: {
		...mapMutations(['setCheckedAddressData']),
        /*下拉刷新的回调 */
        downCallback() {
        	//联网加载数据
        	this.loadData(1);
        },
        /*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
        upCallback(page) {
        	//联网加载数据
        	this.loadData(page.num);
        },
        loadData(pageNo) {
        	let httpData = {
        		pageNo: pageNo,
        		pageSize: 15
        	};
        	this.$http
        		.post('api/mime/address/v1/list', httpData, {
        			load: false
        		})
        		.then(res => {
        			this.mescroll.endByPage(res.data.length, res.pages); //必传参数(当前页的数据个数, 总页数)
        			if (pageNo == 1) {
        				this.addressList = res.data;
        			} else {
        				this.addressList = this.addressList.concat(res.data);
        			}
        		}).catch(()=>{
        			//联网失败, 结束加载
        			this.mescroll.endErr();
        		});
        },
		//页面跳转
		onPageJump(url) {
			uni.navigateTo({
				url: url
			});
		},
		//设置默认
		onSetDefault(index) {
			let item = this.addressList[index];
			if (!item.isDefault) {
				this.$http.get('api/mime/address/v1/set_default', { objId: item.objId }).then(res => {
					this.addressList.map(item => {
						item.isDefault = false;
						return item;
					});
					this.addressList[index].isDefault = true;
				});
			}
		},
		//删除地址
		onDelete(index) {
			uni.showModal({
				title: '提示',
				content: '确定要删除吗？',
				success: res => {
					if (res.confirm) {
						const item = this.addressList[index];
						this.$http.get('api/mime/address/v1/del', { objId: item.objId }).then(data => {
							uni.showToast({
								title: '删除成功!',
								icon: 'none'
							});
							this.mescroll.triggerDownScroll();
						});
					}
				}
			});
		},
		//选择收货地址
		onSelectAddress(item) {
			if (this.isSelect > 0) {
				item.type = this.isSelect;
				this.setCheckedAddressData(item);
				uni.navigateBack();
			}
		}
	},
	//页面隐藏
	onHide() {},
	//页面卸载
	onUnload() {},
	//用户点击分享
	onShareAppMessage(e) {
		return this.wxShare();
	}
};
</script>
<style lang="scss" scoped>
@import '@/style/mixin.scss';
.address_list {
	background-color: #ffffff;
	border-radius: 8rpx;
	padding: 0 30rpx;
	position: relative;
	overflow: hidden;
	margin-bottom: 30rpx;
	margin-left: 30rpx;
	margin-right: 30rpx;
	&::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		background-image: url('../../../static/icon/bg_colour.png');
		background-repeat: repeat-x;
		background-size: auto 100%;
		height: 6rpx;
		width: 100%;
	}
	.address_info {
		padding: 36rpx 0 30rpx 0;
		text {
			font-size: 24rpx;
			color: #555;
		}
		view {
			font-size: 28rpx;
			color: #555555;
			margin-top: 10rpx;
			font-weight: bold;
		}
	}
	.user_info {
		padding: 30rpx 0;
		display: flex;
		justify-content: space-between;
		border-top: 2rpx solid #f5f5f5;
		text {
			font-size: 24rpx;
			color: #555555;
		}
	}
	.btn_box {
		border-top: 1rpx solid #f5f5f5;
		padding: 30rpx 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.default {
			display: flex;
			align-items: center;
			font-size: 26rpx;
			color: #000000;
			flex-shrink: 0;
			&::before {
				content: '';
				@include theme('unselected_img', '../../../');
				background-repeat: no-repeat;
				background-position: center center;
				background-size: cover; 
				width: 38rpx;
				height: 38rpx;
				margin-right: 20rpx;
			}
			&.active::before {
				@include theme('radio_img', '../../../');
			}
		}
		.edit_delete_box {
			display: flex;
			view {
				display: flex;
				align-items: center;
				font-size: 26rpx;
				color: #000000;
				margin-left: 60rpx;
				image {
					width: 34rpx;
					height: 34rpx;
					margin-right: 20rpx;
				}
			}
		}
	}
}
.add_address {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	button {
		width: 100%;
		height: 88rpx;
		line-height: 88rpx;
		background-color: $themeColor;
		border-radius: 0rpx;
		text-align: center;
		font-size: 32rpx;
		color: #ffffff;
	}
}
.no_data_box {
	height: 85vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	image {
		width: 380rpx;
		height: 221rpx;
	}
	text {
		margin-top: 40rpx;
		font-size: 28rpx;
		color: #333333;
	}
	.form_but {
		width: 100%;
	}
}
</style>
